<template>
  <div class="data-manage">
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">

            <el-select v-model="value" placeholder="所有等级">
              <el-option :value="value">提示</el-option>
              <el-option :value="value">警告</el-option>
              <el-option :value="value">错误</el-option>
            </el-select>


            <el-date-picker
              v-model="cycle"
              :picker-options="picker"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:400px;"
              @change="handleFilter"
            />
            <el-select v-model="allModel" placeholder="所有模块">
              <el-option :value="allModel">系统</el-option>
              <el-option :value="allModel">用户</el-option>
              <el-option :value="allModel">角色</el-option>
            </el-select>

            <el-input
              v-model="username"
              style="width:200px;"
              placeholder="用户名"
              @keyup.enter.native="handleFilter"
            />
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
      <subtable
        :table-label="tableLabel"
        :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      >
        <!-- 用户名列表项可点击 -->
        <el-table-column slot="first" prop="username" label="用户" align="center" min-width="10">
          <template slot-scope="scope">
            <el-button type="text">{{ scope.row.userName }}</el-button>
          </template>
        </el-table-column>
      </subtable>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import SubDialog from '@/components/Dialog'; // 个人信息弹窗
  import Subtable from '@/components/Eltable'; // 表格组件
  import Pagination from '@/components/Pagination'; // 分页组件
  import {list} from "@/api/system/systemLog"; // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    components: {
      Subtable,
      Pagination,
      SubDialog
    },
    data() {
      return {
        dialogData: {},
        value: '',
        username: '',
        allModel: '',
        cycle: '',
        total: 1,
        currentpage: 1,
        pagesize: 10,
        listFilter: [],
        picker: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        // 表头
        tableLabel: [
          {
            label: '日志等级', width: '5', prop: 'level'
          }, {
            label: '操作', width: '5', prop: 'message'
          }, {
            label: '业务模块', width: '5', prop: 'module'
          }, {
            label: '操作时间', width: '5', prop: 'createTimeTimeStr'
          }, {
            label: 'IP地址', width: '5', prop: 'ip'
          },
        ],
        // 表格数据 用prop绑定
        tableData: [],
        handleFilter(row) {
        },
        clearParams() {
          this.value = ''
          this.cycle = ''
          this.allModel = ''
          this.username = ''
          this.getData()
        },
        handleSizeChange(row) {
        },
        handleCurrentChange(row) {
        },
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        list(getTenantId()).then(response => {
          this.tableData = response.data.items
          this.total = response.data.items.length
          this.listFilter = response.data.items
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .data-manage {
    padding: 14px 20px 0px 20px;

    .allsearch {
      margin-top: 0px;
      padding: 0;

      .search-content {
        width: 100%;
      }
    }
  }
</style>
